Get in Touch

Have questions or need help? We're here for you. Reach out to our team.

Contact Information

Email

For general inquiries:

info@aistudio.com

For support:

support@aistudio.com

Phone

Main Office:

+1 (555) 123-4567

Support Hotline:

+1 (555) 987-6543

Office Locations

Headquarters:

123 AI Boulevard, San Francisco, CA 94105, USA

International Offices:

London • Singapore • Tokyo

Hours of Operation

Monday - Friday:

9:00 AM - 6:00 PM (PST)

Support Hours:

24/7 for Enterprise customers

Send Us a Message

Full Name

Email Address

Subject

Inquiry Type

Message

</div>

<Button type="submit" size="lg" className="w-full md:w-auto">
                      Send Message
                    </Button>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </section>

<section className="py-20 bg-muted/30">
          <div className="container">
            <div className="text-center mb-16">
              <h2 className="text-3xl font-bold mb-4">Frequently Asked Questions</h2>
              <p className="text-xl text-muted-foreground max-w-2xl mx-auto">Find quick answers to common questions</p>
            </div>

<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
              <div className="bg-background rounded-xl p-6 border shadow-sm">
                <h3 className="text-xl font-semibold mb-3">How quickly can I expect a response?</h3>
                <p className="text-muted-foreground">
                  We typically respond to all inquiries within 24 hours during business days. For urgent matters, please
                  call our support hotline.
                </p>
              </div>
              <div className="bg-background rounded-xl p-6 border shadow-sm">
                <h3 className="text-xl font-semibold mb-3">Do you offer demos of your products?</h3>
                <p className="text-muted-foreground">
                  Yes! You can schedule a personalized demo with our team by visiting our Book a Demo page or contacting
                  sales directly.
                </p>
              </div>
              <div className="bg-background rounded-xl p-6 border shadow-sm">
                <h3 className="text-xl font-semibold mb-3">How can I report a technical issue?</h3>
                <p className="text-muted-foreground">
                  For technical issues, please email support@aistudio.com with details about the problem, including
                  screenshots if possible.
                </p>
              </div>
              <div className="bg-background rounded-xl p-6 border shadow-sm">
                <h3 className="text-xl font-semibold mb-3">Are you hiring?</h3>
                <p className="text-muted-foreground">
                  We're always looking for talented individuals to join our team. Check out our Careers page for current
                  openings.
                </p>
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  )
}

[V0_FILE]typescriptreact:file="app/book-demo/page.tsx"
import Navbar from "@/components/navbar"
import Footer from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { CalendarIcon, CheckCircle } from "lucide-react"

export default function BookDemoPage() {
  return (
    <>
      <Navbar />
      <main>
        <section className="py-20 bg-slate-900 text-white">
          <div className="container">
            <div className="max-w-3xl mx-auto text-center">
              <h1 className="text-4xl md:text-5xl font-bold mb-6">Book a Personalized Demo</h1>
              <p className="text-xl text-slate-300 mb-8">
                See our AI tools in action with a customized demonstration tailored to your needs.
              </p>
            </div>
          </div>
        </section>

<div className="space-y-6">
                  <div className="flex gap-4">
                    <CheckCircle className="h-6 w-6 text-primary flex-shrink-0 mt-1" />
                    <div>
                      <h3 className="font-semibold text-lg">Personalized Experience</h3>
                      <p className="text-muted-foreground">
                        Get a customized walkthrough of our platform focused on your specific needs and use cases.
                      </p>
                    </div>
                  </div>

<div className="flex gap-4">
                    <CheckCircle className="h-6 w-6 text-primary flex-shrink-0 mt-1" />
                    <div>
                      <h3 className="font-semibold text-lg">Expert Guidance</h3>
                      <p className="text-muted-foreground">
                        Connect with our product specialists who can answer your questions and provide insights.
                      </p>
                    </div>
                  </div>

<div className="flex gap-4">
                    <CheckCircle className="h-6 w-6 text-primary flex-shrink-0 mt-1" />
                    <div>
                      <h3 className="font-semibold text-lg">See Advanced Features</h3>
                      <p className="text-muted-foreground">
                        Explore the full capabilities of our AI tools, including enterprise-only features.
                      </p>
                    </div>
                  </div>

<div className="flex gap-4">
                    <CheckCircle className="h-6 w-6 text-primary flex-shrink-0 mt-1" />
                    <div>
                      <h3 className="font-semibold text-lg">Implementation Strategies</h3>
                      <p className="text-muted-foreground">
                        Learn best practices for integrating our AI tools into your existing workflows.
                      </p>
                    </div>
                  </div>
                </div>

<div className="mt-10 p-6 bg-muted/30 rounded-xl">
                  <h3 className="font-semibold text-lg mb-3">What to Expect</h3>
                  <ul className="list-disc list-inside space-y-2 text-muted-foreground">
                    <li>30-45 minute personalized demonstration</li>
                    <li>Q&A session with our product specialists</li>
                    <li>Custom pricing information for your needs</li>
                    <li>Follow-up resources and next steps</li>
                  </ul>
                </div>
              </div>

<div>
                <div className="bg-background rounded-xl p-8 border shadow-sm">
                  <h2 className="text-2xl font-bold mb-6">Schedule Your Demo</h2>
                  <form className="space-y-6">
                    <div className="space-y-2">
                      <label htmlFor="name" className="text-sm font-medium">
                        Full Name
                      </label>
                      <Input id="name" placeholder="Enter your full name" />
                    </div>

<div className="space-y-2">
                      <label htmlFor="email" className="text-sm font-medium">
                        Work Email
                      </label>
                      <Input id="email" type="email" placeholder="Enter your work email" />
                    </div>

<div className="space-y-2">
                      <label htmlFor="company" className="text-sm font-medium">
                        Company Name
                      </label>
                      <Input id="company" placeholder="Enter your company name" />
                    </div>

<div className="space-y-2">
                      <label htmlFor="role" className="text-sm font-medium">
                        Job Title
                      </label>
                      <Input id="role" placeholder="Enter your job title" />
                    </div>

<div className="space-y-2">
                      <label htmlFor="company-size" className="text-sm font-medium">
                        Company Size
                      </label>
                      <Select>
                        <SelectTrigger id="company-size">
                          <SelectValue placeholder="Select company size" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="1-10">1-10 employees</SelectItem>
                          <SelectItem value="11-50">11-50 employees</SelectItem>
                          <SelectItem value="51-200">51-200 employees</SelectItem>
                          <SelectItem value="201-500">201-500 employees</SelectItem>
                          <SelectItem value="501-1000">501-1000 employees</SelectItem>
                          <SelectItem value="1000+">1000+ employees</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

<div className="space-y-2">
                      <label htmlFor="interests" className="text-sm font-medium">
                        Products of Interest (Select all that apply)
                      </label>
                      <div className="grid grid-cols-2 gap-2 mt-2">
                        <div className="flex items-center space-x-2">
                          <Checkbox id="ai-writer" />
                          <label htmlFor="ai-writer">AI Writer</label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox id="ai-image" />
                          <label htmlFor="ai-image">AI Image Generator</label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox id="ai-chatbot" />
                          <label htmlFor="ai-chatbot">AI Chatbot</label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox id="ai-music" />
                          <label htmlFor="ai-music">AI Music Creator</label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox id="ai-video" />
                          <label htmlFor="ai-video">AI Video Generator</label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox id="ai-data" />
                          <label htmlFor="ai-data">AI Data Analyzer</label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox id="ai-code" />
                          <label htmlFor="ai-code">AI Code Generator</label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox id="ai-speech" />
                          <label htmlFor="ai-speech">AI Speech-to-Text</label>
                        </div>
                      </div>
                    </div>

<div className="space-y-2">
                      <label className="text-sm font-medium">Preferred Demo Date</label>
                      <Popover>
                        <PopoverTrigger asChild>
                          <Button variant="outline" className="w-full justify-start text-left font-normal">
                            <CalendarIcon className="mr-2 h-4 w-4" />
                            <span>Select a date</span>
                          </Button>
                        </PopoverTrigger>
                        <PopoverContent className="w-auto p-0">
                          <Calendar mode="single" initialFocus />
                        </PopoverContent>
                      </Popover>
                    </div>

<div className="space-y-2">
                      <label htmlFor="message" className="text-sm font-medium">
                        Additional Information
                      </label>
                      <Textarea id="message" placeholder="Tell us about your specific needs or questions..." rows={3} />
                    </div>

<Button type="submit" size="lg" className="w-full">
                      Schedule Demo
                    </Button>

<p className="text-xs text-muted-foreground text-center">
                      By submitting this form, you agree to our Privacy Policy and Terms of Service.
                    </p>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  )
}

[V0_FILE]typescriptreact:file="app/sign-in/page.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Checkbox } from "@/components/ui/checkbox"
import { Card, CardContent, CardFooter } from "@/components/ui/card"
import { Github, Twitter } from "lucide-react"
import { Separator } from "@/components/ui/separator"

export default function SignInPage() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [rememberMe, setRememberMe] = useState(false)

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // Handle sign in logic here
    console.log({ email, password, rememberMe })
  }

return (
    <div className="min-h-screen flex items-center justify-center bg-muted/30 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-md w-full space-y-8">
        <div className="text-center">
          <Link href="/" className="inline-block">
            <span className="text-2xl font-bold bg-gradient-to-r from-purple-600 to-blue-500 bg-clip-text text-transparent">
              AI Studio
            </span>
          </Link>
          <h2 className="mt-6 text-3xl font-bold">Sign in to your account</h2>
          <p className="mt-2 text-sm text-muted-foreground">
            Or{" "}
            <Link href="/sign-up" className="text-primary hover:underline">
              create a new account
            </Link>
          </p>
        </div>

<Card>
          <CardContent className="pt-6">
            <form onSubmit={handleSubmit} className="space-y-6">
              <div className="space-y-2">
                <label htmlFor="email" className="text-sm font-medium">
                  Email address
                </label>
                <Input
                  id="email"
                  type="email"
                  placeholder="Enter your email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required
                />
              </div>

<div className="space-y-2">
                <div className="flex items-center justify-between">
                  <label htmlFor="password" className="text-sm font-medium">
                    Password
                  </label>
                  <Link href="/forgot-password" className="text-sm text-primary hover:underline">
                    Forgot password?
                  </Link>
                </div>
                <Input
                  id="password"
                  type="password"
                  placeholder="Enter your password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  required
                />
              </div>

<div className="flex items-center space-x-2">
                <Checkbox
                  id="remember-me"
                  checked={rememberMe}
                  onCheckedChange={(checked) => setRememberMe(checked as boolean)}
                />
                <label
                  htmlFor="remember-me"
                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                >
                  Remember me
                </label>
              </div>

<div className="mt-6">
              <div className="relative">
                <div className="absolute inset-0 flex items-center">
                  <Separator className="w-full" />
                </div>
                <div className="relative flex justify-center text-xs uppercase">
                  <span className="bg-background px-2 text-muted-foreground">Or continue with</span>
                </div>
              </div>

<div className="mt-6 grid grid-cols-2 gap-3">
                <Button variant="outline" className="w-full">
                  <Github className="mr-2 h-4 w-4" />
                  GitHub
                </Button>
                <Button variant="outline" className="w-full">
                  <Twitter className="mr-2 h-4 w-4" />
                  Twitter
                </Button>
              </div>
            </div>
          </CardContent>
          <CardFooter className="flex justify-center border-t pt-6">
            <p className="text-xs text-muted-foreground text-center">
              By signing in, you agree to our{" "}
              <Link href="/terms" className="text-primary hover:underline">
                Terms of Service
              </Link>{" "}
              and{" "}
              <Link href="/privacy" className="text-primary hover:underline">
                Privacy Policy
              </Link>
              .
            </p>
          </CardFooter>
        </Card>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/sign-up/page.tsx"
"use client"

import type React from "react"

export default function SignUpPage() {
  const [name, setName] = useState("")
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [agreeTerms, setAgreeTerms] = useState(false)

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // Handle sign up logic here
    console.log({ name, email, password, agreeTerms })
  }

return (
    <div className="min-h-screen flex items-center justify-center bg-muted/30 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-md w-full space-y-8">
        <div className="text-center">
          <Link href="/" className="inline-block">
            <span className="text-2xl font-bold bg-gradient-to-r from-purple-600 to-blue-500 bg-clip-text text-transparent">
              AI Studio
            </span>
          </Link>
          <h2 className="mt-6 text-3xl font-bold">Create your account</h2>
          <p className="mt-2 text-sm text-muted-foreground">
            Already have an account?{" "}
            <Link href="/sign-in" className="text-primary hover:underline">
              Sign in
            </Link>
          </p>
        </div>

<Card>
          <CardContent className="pt-6">
            <form onSubmit={handleSubmit} className="space-y-6">
              <div className="space-y-2">
                <label htmlFor="name" className="text-sm font-medium">
                  Full Name
                </label>
                <Input
                  id="name"
                  placeholder="Enter your full name"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  required
                />
              </div>

<div className="space-y-2">
                <label htmlFor="email" className="text-sm font-medium">
                  Email address
                </label>
                <Input
                  id="email"
                  type="email"
                  placeholder="Enter your email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required
                />
              </div>

<div className="space-y-2">
                <label htmlFor="password" className="text-sm font-medium">
                  Password
                </label>
                <Input
                  id="password"
                  type="password"
                  placeholder="Create a password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  required
                />
                <p className="text-xs text-muted-foreground">
                  Password must be at least 8 characters long and include a number and a special character.
                </p>
              </div>

<div className="flex items-start space-x-2">
                <Checkbox
                  id="terms"
                  checked={agreeTerms}
                  onCheckedChange={(checked) => setAgreeTerms(checked as boolean)}
                  className="mt-1"
                />
                <label
                  htmlFor="terms"
                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                >
                  I agree to the{" "}
                  <Link href="/terms" className="text-primary hover:underline">
                    Terms of Service
                  </Link>{" "}
                  and{" "}
                  <Link href="/privacy" className="text-primary hover:underline">
                    Privacy Policy
                  </Link>
                </label>
              </div>

<Button type="submit" className="w-full">
                Create account
              </Button>
            </form>

<div className="mt-6 grid grid-cols-2 gap-3">
                <Button variant="outline" className="w-full">
                  <Github className="mr-2 h-4 w-4" />
                  GitHub
                </Button>
                <Button variant="outline" className="w-full">
                  <Twitter className="mr-2 h-4 w-4" />
                  Twitter
                </Button>
              </div>
            </div>
          </CardContent>
          <CardFooter className="flex justify-center border-t pt-6">
            <p className="text-xs text-muted-foreground text-center">
              By creating an account, you agree to receive marketing communications from us. You can unsubscribe at any
              time.
            </p>
          </CardFooter>
        </Card>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/products/page.tsx"
import Navbar from "@/components/navbar"
import Footer from "@/components/footer"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Pencil, Image, MessageSquare, Music, Video, BarChart3, Code, Mic, ArrowRight } from "lucide-react"

export default function ProductsPage() {
  const products = [
    {
      icon: <Pencil className="h-10 w-10 text-white" />,
      title: "AI Writer",
      description: "Generate blog posts, marketing copy, and creative stories with ease.",
      features: [
        "Content generation for blogs, social media, and marketing",
        "Style and tone customization",
        "Multi-language support",
        "SEO optimization suggestions",
        "Content repurposing and summarization",
      ],
      color: "from-pink-500 to-rose-500",
      href: "/products/ai-writer",
    },
    {
      icon: <Image className="h-10 w-10 text-white" />,
      title: "AI Image Generator",
      description: "Create stunning visuals, art, and designs from text descriptions.",
      features: [
        "Text-to-image generation",
        "Style transfer and customization",
        "Image editing and enhancement",
        "Multiple resolution options",
        "Commercial usage rights",
      ],
      color: "from-purple-500 to-indigo-500",
      href: "/products/ai-image-generator",
    },
    {
      icon: <MessageSquare className="h-10 w-10 text-white" />,
      title: "AI Chatbot",
      description: "Build conversational AI assistants for customer support and engagement.",
      features: [
        "Custom knowledge base integration",
        "Multi-channel deployment",
        "Sentiment analysis",
        "Conversation analytics",
        "Seamless human handoff",
      ],
      color: "from-blue-500 to-cyan-500",
      href: "/products/ai-chatbot",
    },
    {
      icon: <Music className="h-10 w-10 text-white" />,
      title: "AI Music Creator",
      description: "Compose original music tracks and audio in various styles and moods.",
      features: [
        "Genre and mood-based composition",
        "Custom instrument selection",
        "Tempo and key customization",
        "Vocal track generation",
        "Royalty-free commercial usage",
      ],
      color: "from-green-500 to-emerald-500",
      href: "/products/ai-music-creator",
    },
    {
      icon: <Video className="h-10 w-10 text-white" />,
      title: "AI Video Generator",
      description: "Transform text into engaging video content with customizable styles.",
      features: [
        "Text-to-video generation",
        "Custom scene creation",
        "Voice-over synthesis",
        "Multiple aspect ratios and resolutions",
        "Animation and transition effects",
      ],
      color: "from-orange-500 to-amber-500",
      href: "/products/ai-video-generator",
    },
    {
      icon: <BarChart3 className="h-10 w-10 text-white" />,
      title: "AI Data Analyzer",
      description: "Extract insights and visualize patterns from complex datasets.",
      features: [
        "Automated data cleaning and preparation",
        "Pattern recognition and anomaly detection",
        "Predictive analytics",
        "Interactive visualization generation",
        "Natural language insights",
      ],
      color: "from-sky-500 to-blue-500",
      href: "/products/ai-data-analyzer",
    },
    {
      icon: <Code className="h-10 w-10 text-white" />,
      title: "AI Code Generator",
      description: "Write, debug, and optimize code across multiple programming languages.",
      features: [
        "Multi-language code generation",
        "Code explanation and documentation",
        "Bug detection and fixing",
        "Performance optimization",
        "API integration assistance",
      ],
      color: "from-violet-500 to-purple-500",
      href: "/products/ai-code-generator",
    },
    {
      icon: <Mic className="h-10 w-10 text-white" />,
      title: "AI Speech-to-Text",
      description: "Convert audio recordings into accurate text transcriptions.",
      features: [
        "Multi-language transcription",
        "Speaker identification",
        "Punctuation and formatting",
        "Custom vocabulary support",
        "Real-time transcription capabilities",
      ],
      color: "from-red-500 to-pink-500",
      href: "/products/ai-speech-to-text",
    },
  ]

return (
    <>
      <Navbar />
      <main>
        <section className="py-20 bg-slate-900 text-white">
          <div className="container">
            <div className="max-w-3xl mx-auto text-center">
              <h1 className="text-4xl md:text-5xl font-bold mb-6">Our AI Products</h1>
              <p className="text-xl text-slate-300 mb-8">
                Powerful AI tools to enhance your creativity and productivity
              </p>
            </div>
          </div>
        </section>

<section className="py-20">
          <div className="container">
            <div className="space-y-24 max-w-5xl mx-auto">
              {products.map((product, index) => (
                <div
                  key={index}
                  className={`grid md:grid-cols-2 gap-12 items-center ${index % 2 === 1 ? "md:flex-row-reverse" : ""}`}
                >
                  <div className={index % 2 === 1 ? "md:order-2" : ""}>
                    <div
                      className={`inline-flex items-center justify-center rounded-2xl p-6 bg-gradient-to-br ${product.color} mb-6`}
                    >
                      {product.icon}
                    </div>
                    <h2 className="text-3xl font-bold mb-4">{product.title}</h2>
                    <p className="text-xl text-muted-foreground mb-6">{product.description}</p>

<h3 className="text-lg font-semibold mb-4">Key Features</h3>
                    <ul className="space-y-3 mb-8">
                      {product.features.map((feature, i) => (
                        <li key={i} className="flex items-start">
                          <div
                            className={`h-6 w-6 rounded-full bg-gradient-to-br ${product.color} flex items-center justify-center flex-shrink-0 mt-0.5 mr-3`}
                          >
                            <span className="text-white text-xs">✓</span>
                          </div>
                          <span>{feature}</span>
                        </li>
                      ))}
                    </ul>

<Button asChild>
                      <Link href={product.href}>
                        Learn More
                        <ArrowRight className="ml-2 h-4 w-4" />
                      </Link>
                    </Button>
                  </div>

<section className="py-20 bg-muted/30">
          <div className="container">
            <div className="max-w-3xl mx-auto text-center">
              <h2 className="text-3xl font-bold mb-6">Ready to Transform Your Creative Process?</h2>
              <p className="text-xl text-muted-foreground mb-8">
                Choose the plan that's right for you and start creating with AI today.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Button size="lg" asChild>
                  <Link href="/sign-up">Get Started Free</Link>
                </Button>
                <Button size="lg" variant="outline" asChild>
                  <Link href="/pricing">View Pricing</Link>
                </Button>
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  )
}

[V0_FILE]typescriptreact:file="app/products/[slug]/page.tsx"
import { notFound } from "next/navigation"
import Navbar from "@/components/navbar"
import Footer from "@/components/footer"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { Pencil, Image, MessageSquare, Music, Video, BarChart3, Code, Mic, Check, ArrowRight } from "lucide-react"

// Define the product data
const productsData = {
  "ai-writer": {
    icon: <Pencil className="h-10 w-10 text-white" />,
    title: "AI Writer",
    description: "Generate blog posts, marketing copy, and creative stories with ease.",
    longDescription:
      "Our AI Writer helps you create high-quality content in seconds. Whether you need blog posts, marketing copy, product descriptions, or creative stories, our advanced language model can generate human-like text tailored to your specific requirements.",
    features: [
      "Content generation for blogs, social media, and marketing",
      "Style and tone customization",
      "Multi-language support",
      "SEO optimization suggestions",
      "Content repurposing and summarization",
    ],
    benefits: [
      "Save hours of writing time",
      "Overcome writer's block",
      "Maintain consistent content output",
      "Scale your content marketing efforts",
      "Improve SEO rankings with regular publishing",
    ],
    useCases: [
      {
        title: "Content Marketing",
        description:
          "Generate blog posts, articles, and social media content to maintain a consistent publishing schedule.",
      },
      {
        title: "Copywriting",
        description: "Create compelling marketing copy for ads, landing pages, and product descriptions.",
      },
      {
        title: "Creative Writing",
        description: "Get inspiration and draft stories, poems, and scripts for creative projects.",
      },
    ],
    color: "from-pink-500 to-rose-500",
    bgColor: "bg-pink-50",
    textColor: "text-pink-600",
    screenshots: [
      "/placeholder.svg?height=600&width=800&text=AI+Writer+Screenshot+1",
      "/placeholder.svg?height=600&width=800&text=AI+Writer+Screenshot+2",
      "/placeholder.svg?height=600&width=800&text=AI+Writer+Screenshot+3",
    ],
  },
  "ai-image-generator": {
    icon: <Image className="h-10 w-10 text-white" />,
    title: "AI Image Generator",
    description: "Create stunning visuals, art, and designs from text descriptions.",
    longDescription:
      "Transform your ideas into beautiful images with our AI Image Generator. Simply describe what you want to see, and our AI will create stunning visuals that match your description. Perfect for marketing materials, social media, website design, and creative projects.",
    features: [
      "Text-to-image generation",
      "Style transfer and customization",
      "Image editing and enhancement",
      "Multiple resolution options",
      "Commercial usage rights",
    ],
    benefits: [
      "Create custom visuals without design skills",
      "Save money on stock photos and illustrations",
      "Generate unique brand assets",
      "Visualize concepts quickly",
      "Iterate on designs efficiently",
    ],
    useCases: [
      {
        title: "Marketing & Advertising",
        description: "Create eye-catching visuals for social media, ads, and marketing campaigns.",
      },
      {
        title: "Product Design",
        description: "Visualize product concepts and generate mockups before production.",
      },
      {
        title: "Digital Art",
        description: "Explore creative concepts and generate unique artistic compositions.",
      },
    ],
    color: "from-purple-500 to-indigo-500",
    bgColor: "bg-purple-50",
    textColor: "text-purple-600",
    screenshots: [
      "/placeholder.svg?height=600&width=800&text=AI+Image+Generator+Screenshot+1",
      "/placeholder.svg?height=600&width=800&text=AI+Image+Generator+Screenshot+2",
      "/placeholder.svg?height=600&width=800&text=AI+Image+Generator+Screenshot+3",
    ],
  },
  "ai-chatbot": {
    icon: <MessageSquare className="h-10 w-10 text-white" />,
    title: "AI Chatbot",
    description: "Build conversational AI assistants for customer support and engagement.",
    longDescription:
      "Create intelligent chatbots that understand natural language and provide helpful responses to your customers. Our AI Chatbot platform allows you to build, train, and deploy conversational assistants across multiple channels, improving customer satisfaction while reducing support costs.",
    features: [
      "Custom knowledge base integration",
      "Multi-channel deployment",
      "Sentiment analysis",
      "Conversation analytics",
      "Seamless human handoff",
    ],
    benefits: [
      "24/7 customer support coverage",
      "Reduce support ticket volume",
      "Consistent customer experience",
      "Scalable customer interactions",
      "Valuable customer insights",
    ],
    useCases: [
      {
        title: "Customer Support",
        description: "Automate responses to common questions and provide instant support to customers.",
      },
      {
        title: "Lead Generation",
        description: "Engage website visitors and qualify leads through conversational interactions.",
      },
      {
        title: "Internal Knowledge Base",
        description: "Help employees quickly find information and answers to internal questions.",
      },
    ],
    color: "from-blue-500 to-cyan-500",
    bgColor: "bg-blue-50",
    textColor: "text-blue-600",
    screenshots: [
      "/placeholder.svg?height=600&width=800&text=AI+Chatbot+Screenshot+1",
      "/placeholder.svg?height=600&width=800&text=AI+Chatbot+Screenshot+2",
      "/placeholder.svg?height=600&width=800&text=AI+Chatbot+Screenshot+3",
    ],
  },
  "ai-music-creator": {
    icon: <Music className="h-10 w-10 text-white" />,
    title: "AI Music Creator",
    description: "Compose original music tracks and audio in various styles and moods.",
    longDescription:
      "Create original music for your videos, podcasts, games, or other projects without any musical expertise. Our AI Music Creator lets you generate custom tracks by specifying genre, mood, tempo, and instruments, giving you royalty-free music that perfectly fits your creative vision.",
    features: [
      "Genre and mood-based composition",
      "Custom instrument selection",
      "Tempo and key customization",
      "Vocal track generation",
      "Royalty-free commercial usage",
    ],
    benefits: [
      "Create custom soundtracks without musical skills",
      "Save on music licensing costs",
      "Perfect audio-visual synchronization",
      "Unlimited revisions and variations",
      "Unique audio identity for your brand",
    ],
    useCases: [
      {
        title: "Video Production",
        description: "Generate custom background music for videos, commercials, and presentations.",
      },
      {
        title: "Podcast Production",
        description: "Create intro, outro, and transition music for podcasts and audio content.",
      },
      {
        title: "Game Development",
        description: "Compose dynamic soundtracks and audio effects for games and interactive media.",
      },
    ],
    color: "from-green-500 to-emerald-500",
    bgColor: "bg-green-50",
    textColor: "text-green-600",
    screenshots: [
      "/placeholder.svg?height=600&width=800&text=AI+Music+Creator+Screenshot+1",
      "/placeholder.svg?height=600&width=800&text=AI+Music+Creator+Screenshot+2",
      "/placeholder.svg?height=600&width=800&text=AI+Music+Creator+Screenshot+3",
    ],
  },
  "ai-video-generator": {
    icon: <Video className="h-10 w-10 text-white" />,
    title: "AI Video Generator",
    description: "Transform text into engaging video content with customizable styles.",
    longDescription:
      "Turn your scripts and ideas into professional-looking videos in minutes. Our AI Video Generator creates engaging visual content from text, complete with animations, transitions, and optional AI-generated voiceovers. Perfect for marketing, education, social media, and more.",
    features: [
      "Text-to-video generation",
      "Custom scene creation",
      "Voice-over synthesis",
      "Multiple aspect ratios and resolutions",
      "Animation and transition effects",
    ],
    benefits: [
      "Create videos without technical skills",
      "Reduce video production costs",
      "Scale video content creation",
      "Maintain consistent brand identity",
      "Quick turnaround for time-sensitive content",
    ],
    useCases: [
      {
        title: "Social Media Content",
        description: "Create engaging short-form videos for TikTok, Instagram, and other platforms.",
      },
      {
        title: "Marketing Videos",
        description: "Generate product demos, explainer videos, and promotional content.",
      },
      {
        title: "Educational Content",
        description: "Create instructional videos and visual learning materials.",
      },
    ],
    color: "from-orange-500 to-amber-500",
    bgColor: "bg-orange-50",
    textColor: "text-orange-600",
    screenshots: [
      "/placeholder.svg?height=600&width=800&text=AI+Video+Generator+Screenshot+1",
      "/placeholder.svg?height=600&width=800&text=AI+Video+Generator+Screenshot+2",
      "/placeholder.svg?height=600&width=800&text=AI+Video+Generator+Screenshot+3",
    ],
  },
  "ai-data-analyzer": {
    icon: <BarChart3 className="h-10 w-10 text-white" />,
    title: "AI Data Analyzer",
    description: "Extract insights and visualize patterns from complex datasets.",
    longDescription:
      "Make sense of your data with our AI Data Analyzer. Upload your datasets and let our AI identify patterns, trends, and insights that would take hours to discover manually. Get actionable intelligence and beautiful visualizations to help you make data-driven decisions.",
    features: [
      "Automated data cleaning and preparation",
      "Pattern recognition and anomaly detection",
      "Predictive analytics",
      "Interactive visualization generation",
      "Natural language insights",
    ],
    benefits: [
      "Discover hidden patterns in your data",
      "Make data-driven decisions faster",
      "Democratize data analysis across your team",
      "Predict future trends and outcomes",
      "Communicate insights effectively with visualizations",
    ],
    useCases: [
      {
        title: "Business Intelligence",
        description: "Analyze sales data, customer behavior, and market trends to inform strategy.",
      },
      {
        title: "Financial Analysis",
        description: "Identify patterns in financial data and forecast future performance.",
      },
      {
        title: "Research & Development",
        description: "Analyze experimental data and identify promising research directions.",
      },
    ],
    color: "from-sky-500 to-blue-500",
    bgColor: "bg-sky-50",
    textColor: "text-sky-600",
    screenshots: [
      "/placeholder.svg?height=600&width=800&text=AI+Data+Analyzer+Screenshot+1",
      "/placeholder.svg?height=600&width=800&text=AI+Data+Analyzer+Screenshot+2",
      "/placeholder.svg?height=600&width=800&text=AI+Data+Analyzer+Screenshot+3",
    ],
  },
  "ai-code-generator": {
    icon: <Code className="h-10 w-10 text-white" />,
    title: "AI Code Generator",
    description: "Write, debug, and optimize code across multiple programming languages.",
    longDescription:
      "Accelerate your development process with our AI Code Generator. Whether you're a seasoned developer or just starting out, our AI can help you write clean, efficient code in multiple programming languages, debug existing code, and optimize performance.",
    features: [
      "Multi-language code generation",
      "Code explanation and documentation",
      "Bug detection and fixing",
      "Performance optimization",
      "API integration assistance",
    ],
    benefits: [
      "Accelerate development cycles",
      "Reduce debugging time",
      "Learn new programming languages faster",
      "Improve code quality and maintainability",
      "Overcome coding challenges and roadblocks",
    ],
    useCases: [
      {
        title: "Web Development",
        description: "Generate frontend and backend code for web applications and websites.",
      },
      {
        title: "Mobile App Development",
        description: "Create code for iOS, Android, and cross-platform mobile applications.",
      },
      {
        title: "Data Science",
        description: "Generate data processing, analysis, and visualization code.",
      },
    ],
    color: "from-violet-500 to-purple-500",
    bgColor: "bg-violet-50",
    textColor: "text-violet-600",
    screenshots: [
      "/placeholder.svg?height=600&width=800&text=AI+Code+Generator+Screenshot+1",
      "/placeholder.svg?height=600&width=800&text=AI+Code+Generator+Screenshot+2",
      "/placeholder.svg?height=600&width=800&text=AI+Code+Generator+Screenshot+3",
    ],
  },
  "ai-speech-to-text": {
    icon: <Mic className="h-10 w-10 text-white" />,
    title: "AI Speech-to-Text",
    description: "Convert audio recordings into accurate text transcriptions.",
    longDescription:
      "Transform spoken words into written text with our advanced AI Speech-to-Text technology. Transcribe meetings, interviews, podcasts, videos, and more with high accuracy, even in noisy environments or with multiple speakers. Save time and make your audio content searchable and accessible.",
    features: [
      "Multi-language transcription",
      "Speaker identification",
      "Punctuation and formatting",
      "Custom vocabulary support",
      "Real-time transcription capabilities",
    ],
    benefits: [
      "Save hours of manual transcription time",
      "Create searchable archives of audio content",
      "Improve content accessibility",
      "Extract insights from spoken conversations",
      "Repurpose audio content for multiple formats",
    ],
    useCases: [
      {
        title: "Content Creation",
        description: "Transcribe podcasts, videos, and interviews for content repurposing.",
      },
      {
        title: "Meeting Documentation",
        description: "Create accurate records of meetings, calls, and conferences.",
      },
      {
        title: "Accessibility",
        description: "Make audio content accessible to people with hearing impairments.",
      },
    ],
    color: "from-red-500 to-pink-500",
    bgColor: "bg-red-50",
    textColor: "text-red-600",
    screenshots: [
      "/placeholder.svg?height=600&width=800&text=AI+Speech-to-Text+Screenshot+1",
      "/placeholder.svg?height=600&width=800&text=AI+Speech-to-Text+Screenshot+2",
      "/placeholder.svg?height=600&width=800&text=AI+Speech-to-Text+Screenshot+3",
    ],
  },
}

export default function ProductPage({ params }: { params: { slug: string } }) {
  const product = productsData[params.slug as keyof typeof productsData]

if (!product) {
    notFound()
  }

return (
    <>
      <Navbar />
      <main>
        <section className={`py-20 ${product.bgColor}`}>
          <div className="container">
            <div className="grid md:grid-cols-2 gap-12 items-center">
              <div>
                <div
                  className={`inline-flex items-center justify-center rounded-2xl p-6 bg-gradient-to-br ${product.color} mb-6`}
                >
                  {product.icon}
                </div>
                <h1 className="text-4xl md:text-5xl font-bold mb-6">{product.title}</h1>
                <p className="text-xl mb-8">{product.longDescription}</p>
                <div className="flex flex-col sm:flex-row gap-4">
                  <Button size="lg" asChild>
                    <Link href="/sign-up">Try for Free</Link>
                  </Button>
                  <Button size="lg" variant="outline" asChild>
                    <Link href="/book-demo">Request Demo</Link>
                  </Button>
                </div>
              </div>
              <div className="relative">
                <div
                  className={`absolute -inset-4 rounded-xl bg-gradient-to-r ${product.color} opacity-30 blur-xl`}
                ></div>
                <div className="relative aspect-video rounded-xl overflow-hidden border shadow-lg">
                  <img
                    src={product.screenshots[0] || "/placeholder.svg"}
                    alt={`${product.title} screenshot`}
                    className="w-full h-full object-cover"
                  />
                </div>
              </div>
            </div>
          </div>
        </section>

<section className="py-20">
          <div className="container">
            <h2 className="text-3xl font-bold text-center mb-16">Key Features</h2>
            <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
              {product.features.map((feature, index) => (
                <div key={index} className="bg-background rounded-xl p-6 shadow-sm border">
                  <div
                    className={`h-10 w-10 rounded-full bg-gradient-to-br ${product.color} flex items-center justify-center mb-4`}
                  >
                    <Check className="h-5 w-5 text-white" />
                  </div>
                  <p className="text-lg">{feature}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

<section className="py-20 bg-muted/30">
          <div className="container">
            <h2 className="text-3xl font-bold text-center mb-16">How It Works</h2>
            <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
              <div className="bg-background rounded-xl p-6 shadow-sm border text-center">
                <div className="h-12 w-12 rounded-full bg-muted flex items-center justify-center mx-auto mb-4">
                  <span className="text-xl font-bold">1</span>
                </div>
                <h3 className="text-xl font-semibold mb-2">Input Your Requirements</h3>
                <p className="text-muted-foreground">
                  Describe what you want to create or provide the necessary input data.
                </p>
              </div>
              <div className="bg-background rounded-xl p-6 shadow-sm border text-center">
                <div className="h-12 w-12 rounded-full bg-muted flex items-center justify-center mx-auto mb-4">
                  <span className="text-xl font-bold">2</span>
                </div>
                <h3 className="text-xl font-semibold mb-2">AI Processing</h3>
                <p className="text-muted-foreground">
                  Our advanced AI models process your request using state-of-the-art algorithms.
                </p>
              </div>
              <div className="bg-background rounded-xl p-6 shadow-sm border text-center">
                <div className="h-12 w-12 rounded-full bg-muted flex items-center justify-center mx-auto mb-4">
                  <span className="text-xl font-bold">3</span>
                </div>
                <h3 className="text-xl font-semibold mb-2">Get Results</h3>
                <p className="text-muted-foreground">
                  Receive high-quality output that you can use, edit, or refine as needed.
                </p>
              </div>
            </div>
          </div>
        </section>

<section className="py-20">
          <div className="container">
            <h2 className="text-3xl font-bold text-center mb-16">Use Cases</h2>
            <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
              {product.useCases.map((useCase, index) => (
                <div key={index} className="bg-background rounded-xl p-6 shadow-sm border">
                  <h3 className={`text-xl font-semibold mb-3 ${product.textColor}`}>{useCase.title}</h3>
                  <p className="text-muted-foreground">{useCase.description}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

<section className="py-20 bg-muted/30">
          <div className="container">
            <h2 className="text-3xl font-bold text-center mb-16">Screenshots</h2>
            <div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto">
              {product.screenshots.map((screenshot, index) => (
                <div key={index} className="rounded-xl overflow-hidden border shadow-md">
                  <img
                    src={screenshot || "/placeholder.svg"}
                    alt={`${product.title} screenshot ${index + 1}`}
                    className="w-full h-auto"
                  />
                </div>
              ))}
            </div>
          </div>
        </section>

<section className="py-20">
          <div className="container">
            <div className="max-w-3xl mx-auto text-center">
              <h2 className="text-3xl font-bold mb-6">Ready to Get Started?</h2>
              <p className="text-xl text-muted-foreground mb-8">
                Join thousands of users already creating amazing content with {product.title}.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Button size="lg" asChild>
                  <Link href="/sign-up">
                    Start Free Trial
                    <ArrowRight className="ml-2 h-5 w-5" />
                  </Link>
                </Button>
                <Button size="lg" variant="outline" asChild>
                  <Link href="/pricing">View Pricing</Link>
                </Button>
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  )
}
88:["$","$L90",null,{"chatId":"Xcn6lMaFLrJ","children":["$","$L91",null,{"data":{"@\"active-block\",\"Xcn6lMaFLrJ\",":{"id":"b_IpHk8wpzV1K","messageId":"3lptWtDEI0qqBHrItDPx0ubNCWnjT72a","source":"$92","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"ai-landing-page","type":"code-project","project":"ai-landing-page"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"Xcn6lMaFLrJ\",":false,"":null},"children":"$L93"}]}]
8d:["$","$L79","qnlpeGNqTXN",{"value":{"fallback":{"template:qnlpeGNqTXN:likes":{"likeCount":40,"isLiked":false}}},"children":["$","div",null,{"className":"has-focus-visible:ring-offset-background relative flex w-full flex-col gap-2 text-sm sm:min-w-0","children":[["$","div",null,{"className":"shadow-base bg-v0-background-200 relative aspect-video w-full overflow-hidden rounded-lg text-sm has-focus-visible:outline-hidden has-focus-visible:ring-2 has-focus-visible:ring-v0-blue-700 has-focus-visible:ring-offset-1","children":[["$","$L94",null,{"index":0,"src":"https://gvsmhepiuiax2e6y.public.blob.vercel-storage.com/templates/assets/Screenshot%202025-02-12%20103632-9Yn8dPpz6yGlUfahb0geownfgIwgiS.jpg","alt":"","templateCanonId":"qnlpeGNqTXN","blockId":"b_7X3V2v3nB87"}],false,["$","div",null,{"className":"absolute inset-0 flex items-center justify-center bg-linear-to-b from-[hsla(0,0%,100%,0.3)] to-[hsla(0,0%,40%,0.3)] opacity-0 transition-opacity focus-within:opacity-100 hover:opacity-100 has-data-[pending=true]:opacity-100","children":[[["$","$L95",null,{"href":"/templates/qnlpeGNqTXN","className":"absolute inset-0 sm:hidden","prefetch":false}],["$","$L95",null,{"href":"/templates/qnlpeGNqTXN","tabIndex":-1,"className":"absolute inset-0 hidden sm:block","prefetch":false}]],["$","div",null,{"className":"z-10 hidden w-32 flex-col items-center justify-center gap-2 sm:flex","children":["$","$L95",null,{"href":"/templates/qnlpeGNqTXN","prefetch":false,"children":"View Details","className":"focus-visible:ring-offset-background outline-hidden has-focus-visible:ring-2 inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-1.5 whitespace-nowrap text-nowrap border font-medium ring-v0-caveat-focus-ring-tab transition focus-visible:ring-2 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:bg-v0-gray-100 disabled:text-v0-gray-500 disabled:ring-0 aria-disabled:cursor-not-allowed aria-disabled:bg-v0-gray-100 aria-disabled:text-v0-gray-500 aria-disabled:ring-0 [&>svg]:pointer-events-none [&>svg]:size-4 [&_svg]:shrink-0 disabled:border-v0-alpha-400 text-v0-background-100 aria-disabled:border-v0-alpha-400 border-v0-gray-1000 bg-v0-gray-1000 hover:border-v0-gray-900 hover:bg-v0-gray-900 focus:border-v0-gray-900 focus:bg-v0-gray-900 focus-visible:border-v0-gray-900 focus-visible:bg-v0-gray-900 h-8 px-3 text-sm has-[>kbd]:gap-2 has-[>svg]:px-2 has-[>kbd]:pr-[6px] rounded-lg w-full","disabled":"$undefined","ref":null}]}]]}]]}],["$","div",null,{"className":"flex items-center gap-3 pr-1 w-full","children":[["$","$L7e",null,{"teamId":"$undefined","authorId":"9kkxXvO2T5rAYyuiy5kvt1hf"}],["$","$L95",null,{"className":"flex flex-1 min-w-0 items-center gap-3","href":"/templates/qnlpeGNqTXN","tabIndex":-1,"prefetch":false,"data-testid":"template-card-link","children":["$","div",null,{"className":"flex flex-1 min-w-0 flex-col gap-1.5","children":[["$","div",null,{"className":"line-clamp-1 font-medium leading-none text-v0-gray-1000","children":"Pixelated Background (Animated)"}],null,["$","div",null,{"className":"flex flex-row items-center gap-1.5 text-v0-gray-900","children":[["$","div",null,{"className":"flex flex-row whitespace-nowrap items-center gap-1.5","children":[["$","svg",null,{"className":"size-3","dangerouslySetInnerHTML":{"__html":"<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.5 3.25C2.5 1.45507 3.95507 0 5.75 0H6.25C8.04493 0 9.5 1.45507 9.5 3.25V3.75C9.5 5.54493 8.04493 7 6.25 7H5.75C3.95507 7 2.5 5.54493 2.5 3.75V3.25ZM5.75 1.5C4.7835 1.5 4 2.2835 4 3.25V3.75C4 4.7165 4.7835 5.5 5.75 5.5H6.25C7.2165 5.5 8 4.7165 8 3.75V3.25C8 2.2835 7.2165 1.5 6.25 1.5H5.75ZM1.5 14.5V13.1709C2.31958 11.5377 3.99308 10.5 5.82945 10.5H6.17055C8.00692 10.5 9.68042 11.5377 10.5 13.1709V14.5H1.5ZM5.82945 9C3.35483 9 1.10604 10.4388 0.0690305 12.6857L0 12.8353V13V15.25V16H0.75H11.25H12V15.25V13V12.8353L11.931 12.6857C10.894 10.4388 8.64517 9 6.17055 9H5.82945ZM15.931 12.6857C15.3706 11.4715 14.4561 10.4931 13.3439 9.85058L12.5935 11.1494C13.399 11.6148 14.0681 12.3101 14.5 13.1709V14.5H13.5V16H15.25H16V15.25V13V12.8352L15.931 12.6857ZM11.25 0H10.5V1.5H11.25C12.2165 1.5 13 2.2835 13 3.25V3.75C13 4.7165 12.2165 5.5 11.25 5.5H10.5V7H11.25C13.0449 7 14.5 5.54493 14.5 3.75V3.25C14.5 1.45507 13.0449 0 11.25 0Z\" fill=\"currentColor\"/>"},"data-testid":"geist-icon","height":16,"strokeLinejoin":"round","style":{"verticalAlign":"$undefined","width":"$undefined","height":"$undefined","color":"currentColor"},"viewBox":"0 0 16 16","width":16}],"$L96"]}],"$L97","$L98"]}]]}]}]]}]]}]}]
8c:["$","$L79","V3jVewszBPu",{"value":{"fallback":{"template:V3jVewszBPu:likes":{"likeCount":36,"isLiked":false}}},"children":["$","div",null,{"className":"has-focus-visible:ring-offset-background relative flex w-full flex-col gap-2 text-sm sm:min-w-0","children":[["$","div",null,{"className":"shadow-base bg-v0-background-200 relative aspect-video w-full overflow-hidden rounded-lg text-sm has-focus-visible:outline-hidden has-focus-visible:ring-2 has-focus-visible:ring-v0-blue-700 has-focus-visible:ring-offset-1","children":[["$","$L94",null,{"index":0,"src":"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/screenshots/dpl_3bQ6ggiSdueUKuPCrovL8GTTibyp-rbbwzK6DQ7mGiurFhU2AhFzLrWCTrN.jpg","alt":"","templateCanonId":"V3jVewszBPu","blockId":"b_gzVAruid7pW"}],false,["$","div",null,{"className":"absolute inset-0 flex items-center justify-center bg-linear-to-b from-[hsla(0,0%,100%,0.3)] to-[hsla(0,0%,40%,0.3)] opacity-0 transition-opacity focus-within:opacity-100 hover:opacity-100 has-data-[pending=true]:opacity-100","children":[[["$","$L95",null,{"href":"/templates/V3jVewszBPu","className":"absolute inset-0 sm:hidden","prefetch":false}],["$","$L95",null,{"href":"/templates/V3jVewszBPu","tabIndex":-1,"className":"absolute inset-0 hidden sm:block","prefetch":false}]],["$","div",null,{"className":"z-10 hidden w-32 flex-col items-center justify-center gap-2 sm:flex","children":["$","$L95",null,{"href":"/templates/V3jVewszBPu","prefetch":false,"children":"View Details","className":"focus-visible:ring-offset-background outline-hidden has-focus-visible:ring-2 inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-1.5 whitespace-nowrap text-nowrap border font-medium ring-v0-caveat-focus-ring-tab transition focus-visible:ring-2 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:bg-v0-gray-100 disabled:text-v0-gray-500 disabled:ring-0 aria-disabled:cursor-not-allowed aria-disabled:bg-v0-gray-100 aria-disabled:text-v0-gray-500 aria-disabled:ring-0 [&>svg]:pointer-events-none [&>svg]:size-4 [&_svg]:shrink-0 disabled:border-v0-alpha-400 text-v0-background-100 aria-disabled:border-v0-alpha-400 border-v0-gray-1000 bg-v0-gray-1000 hover:border-v0-gray-900 hover:bg-v0-gray-900 focus:border-v0-gray-900 focus:bg-v0-gray-900 focus-visible:border-v0-gray-900 focus-visible:bg-v0-gray-900 h-8 px-3 text-sm has-[>kbd]:gap-2 has-[>svg]:px-2 has-[>kbd]:pr-[6px] rounded-lg w-full","disabled":"$undefined","ref":null}]}]]}]]}],["$","div",null,{"className":"flex items-center gap-3 pr-1 w-full","children":[["$","$L7e",null,{"teamId":"$undefined","authorId":"SFXplSPIzEfE8HibFooLDOWD"}],["$","$L95",null,{"className":"flex flex-1 min-w-0 items-center gap-3","href":"/templates/V3jVewszBPu","tabIndex":-1,"prefetch":false,"data-testid":"template-card-link","children":["$","div",null,{"className":"flex flex-1 min-w-0 flex-col gap-1.5","children":[["$","div",null,{"className":"line-clamp-1 font-medium leading-none text-v0-gray-1000","children":"Modern Pet Store E-commerce Template"}],null,["$","div",null,{"className":"flex flex-row items-center gap-1.5 text-v0-gray-900","children":[["$","div",null,{"className":"flex flex-row whitespace-nowrap items-center gap-1.5","children":[["$","svg",null,{"className":"size-3","dangerouslySetInnerHTML":{"__html":"<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.5 3.25C2.5 1.45507 3.95507 0 5.75 0H6.25C8.04493 0 9.5 1.45507 9.5 3.25V3.75C9.5 5.54493 8.04493 7 6.25 7H5.75C3.95507 7 2.5 5.54493 2.5 3.75V3.25ZM5.75 1.5C4.7835 1.5 4 2.2835 4 3.25V3.75C4 4.7165 4.7835 5.5 5.75 5.5H6.25C7.2165 5.5 8 4.7165 8 3.75V3.25C8 2.2835 7.2165 1.5 6.25 1.5H5.75ZM1.5 14.5V13.1709C2.31958 11.5377 3.99308 10.5 5.82945 10.5H6.17055C8.00692 10.5 9.68042 11.5377 10.5 13.1709V14.5H1.5ZM5.82945 9C3.35483 9 1.10604 10.4388 0.0690305 12.6857L0 12.8353V13V15.25V16H0.75H11.25H12V15.25V13V12.8353L11.931 12.6857C10.894 10.4388 8.64517 9 6.17055 9H5.82945ZM15.931 12.6857C15.3706 11.4715 14.4561 10.4931 13.3439 9.85058L12.5935 11.1494C13.399 11.6148 14.0681 12.3101 14.5 13.1709V14.5H13.5V16H15.25H16V15.25V13V12.8352L15.931 12.6857ZM11.25 0H10.5V1.5H11.25C12.2165 1.5 13 2.2835 13 3.25V3.75C13 4.7165 12.2165 5.5 11.25 5.5H10.5V7H11.25C13.0449 7 14.5 5.54493 14.5 3.75V3.25C14.5 1.45507 13.0449 0 11.25 0Z\" fill=\"currentColor\"/>"},"data-testid":"geist-icon","height":16,"strokeLinejoin":"round","style":{"verticalAlign":"$undefined","width":"$undefined","height":"$undefined","color":"currentColor"},"viewBox":"0 0 16 16","width":16}],"$L99"]}],"$L9a","$L9b"]}]]}]}]]}]]}]}]
8e:["$","$L79","Wq9YBxk9Ndl",{"value":{"fallback":{"template:Wq9YBxk9Ndl:likes":{"likeCount":6,"isLiked":false}}},"children":["$","div",null,{"className":"has-focus-visible:ring-offset-background relative flex w-full flex-col gap-2 text-sm sm:min-w-0","children":[["$","div",null,{"className":"shadow-base bg-v0-background-200 relative aspect-video w-full overflow-hidden rounded-lg text-sm has-focus-visible:outline-hidden has-focus-visible:ring-2 has-focus-visible:ring-v0-blue-700 has-focus-visible:ring-offset-1","children":[["$","$L94",null,{"index":1,"src":"https://gvsmhepiuiax2e6y.public.blob.vercel-storage.com/templates/screenshots/Wq9YBxk9Ndl-cs85mRa3jAdRUkcBW01386r5apwkNY.jpg","alt":"","templateCanonId":"Wq9YBxk9Ndl","blockId":"b_MLpAeT4z188"}],false,["$","div",null,{"className":"absolute inset-0 flex items-center justify-center bg-linear-to-b from-[hsla(0,0%,100%,0.3)] to-[hsla(0,0%,40%,0.3)] opacity-0 transition-opacity focus-within:opacity-100 hover:opacity-100 has-data-[pending=true]:opacity-100","children":[[["$","$L95",null,{"href":"/templates/Wq9YBxk9Ndl","className":"absolute inset-0 sm:hidden","prefetch":false}],["$","$L95",null,{"href":"/templates/Wq9YBxk9Ndl","tabIndex":-1,"className":"absolute inset-0 hidden sm:block","prefetch":false}]],["$","div",null,{"className":"z-10 hidden w-32 flex-col items-center justify-center gap-2 sm:flex","children":["$","$L95",null,{"href":"/templates/Wq9YBxk9Ndl","prefetch":false,"children":"View Details","className":"focus-visible:ring-offset-background outline-hidden has-focus-visible:ring-2 inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-1.5 whitespace-nowrap text-nowrap border font-medium ring-v0-caveat-focus-ring-tab transition focus-visible:ring-2 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:bg-v0-gray-100 disabled:text-v0-gray-500 disabled:ring-0 aria-disabled:cursor-not-allowed aria-disabled:bg-v0-gray-100 aria-disabled:text-v0-gray-500 aria-disabled:ring-0 [&>svg]:pointer-events-none [&>svg]:size-4 [&_svg]:shrink-0 disabled:border-v0-alpha-400 text-v0-background-100 aria-disabled:border-v0-alpha-400 border-v0-gray-1000 bg-v0-gray-1000 hover:border-v0-gray-900 hover:bg-v0-gray-900 focus:border-v0-gray-900 focus:bg-v0-gray-900 focus-visible:border-v0-gray-900 focus-visible:bg-v0-gray-900 h-8 px-3 text-sm has-[>kbd]:gap-2 has-[>svg]:px-2 has-[>kbd]:pr-[6px] rounded-lg w-full","disabled":"$undefined","ref":null}]}]]}]]}],["$","div",null,{"className":"flex items-center gap-3 pr-1 w-full","children":[["$","$L7e",null,{"teamId":"$undefined","authorId":"oiPojV6yCldbx6lt2cW6zU9V"}],["$","$L95",null,{"className":"flex flex-1 min-w-0 items-center gap-3","href":"/templates/Wq9YBxk9Ndl","tabIndex":-1,"prefetch":false,"data-testid":"template-card-link","children":["$","div",null,{"className":"flex flex-1 min-w-0 flex-col gap-1.5","children":[["$","div",null,{"className":"line-clamp-1 font-medium leading-none text-v0-gray-1000","children":"Complete E-commerce website"}],null,["$","div",null,{"className":"flex flex-row items-center gap-1.5 text-v0-gray-900","children":[["$","div",null,{"className":"flex flex-row whitespace-nowrap items-center gap-1.5","children":[["$","svg",null,{"className":"size-3","dangerouslySetInnerHTML":{"__html":"<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.5 3.25C2.5 1.45507 3.95507 0 5.75 0H6.25C8.04493 0 9.5 1.45507 9.5 3.25V3.75C9.5 5.54493 8.04493 7 6.25 7H5.75C3.95507 7 2.5 5.54493 2.5 3.75V3.25ZM5.75 1.5C4.7835 1.5 4 2.2835 4 3.25V3.75C4 4.7165 4.7835 5.5 5.75 5.5H6.25C7.2165 5.5 8 4.7165 8 3.75V3.25C8 2.2835 7.2165 1.5 6.25 1.5H5.75ZM1.5 14.5V13.1709C2.31958 11.5377 3.99308 10.5 5.82945 10.5H6.17055C8.00692 10.5 9.68042 11.5377 10.5 13.1709V14.5H1.5ZM5.82945 9C3.35483 9 1.10604 10.4388 0.0690305 12.6857L0 12.8353V13V15.25V16H0.75H11.25H12V15.25V13V12.8353L11.931 12.6857C10.894 10.4388 8.64517 9 6.17055 9H5.82945ZM15.931 12.6857C15.3706 11.4715 14.4561 10.4931 13.3439 9.85058L12.5935 11.1494C13.399 11.6148 14.0681 12.3101 14.5 13.1709V14.5H13.5V16H15.25H16V15.25V13V12.8352L15.931 12.6857ZM11.25 0H10.5V1.5H11.25C12.2165 1.5 13 2.2835 13 3.25V3.75C13 4.7165 12.2165 5.5 11.25 5.5H10.5V7H11.25C13.0449 7 14.5 5.54493 14.5 3.75V3.25C14.5 1.45507 13.0449 0 11.25 0Z\" fill=\"currentColor\"/>"},"data-testid":"geist-icon","height":16,"strokeLinejoin":"round","style":{"verticalAlign":"$undefined","width":"$undefined","height":"$undefined","color":"currentColor"},"viewBox":"0 0 16 16","width":16}],"$L9c"]}],"$L9d","$L9e"]}]]}]}]]}]]}]}]
8f:["$","$L79","CZn91JpXIMe",{"value":{"fallback":{"template:CZn91JpXIMe:likes":{"likeCount":6,"isLiked":false}}},"children":["$","div",null,{"className":"has-focus-visible:ring-offset-background relative flex w-full flex-col gap-2 text-sm sm:min-w-0","children":[["$","div",null,{"className":"shadow-base bg-v0-background-200 relative aspect-video w-full overflow-hidden rounded-lg text-sm has-focus-visible:outline-hidden has-focus-visible:ring-2 has-focus-visible:ring-v0-blue-700 has-focus-visible:ring-offset-1","children":[["$","$L94",null,{"index":2,"src":"https://gvsmhepiuiax2e6y.public.blob.vercel-storage.com/templates/screenshots/CZn91JpXIMe-vk8uuJvckQVHQs4Ie7ywMEJKau9AJj.jpg","alt":"","templateCanonId":"CZn91JpXIMe","blockId":"b_2ey51zPwmW4"}],false,["$","div",null,{"className":"absolute inset-0 flex items-center justify-center bg-linear-to-b from-[hsla(0,0%,100%,0.3)] to-[hsla(0,0%,40%,0.3)] opacity-0 transition-opacity focus-within:opacity-100 hover:opacity-100 has-data-[pending=true]:opacity-100","children":[[["$","$L95",null,{"href":"/templates/CZn91JpXIMe","className":"absolute inset-0 sm:hidden","prefetch":false}],["$","$L95",null,{"href":"/templates/CZn91JpXIMe","tabIndex":-1,"className":"absolute inset-0 hidden sm:block","prefetch":false}]],["$","div",null,{"className":"z-10 hidden w-32 flex-col items-center justify-center gap-2 sm:flex","children":["$","$L95",null,{"href":"/templates/CZn91JpXIMe","prefetch":false,"children":"View Details","className":"focus-visible:ring-offset-background outline-hidden has-focus-visible:ring-2 inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-1.5 whitespace-nowrap text-nowrap border font-medium ring-v0-caveat-focus-ring-tab transition focus-visible:ring-2 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:bg-v0-gray-100 disabled:text-v0-gray-500 disabled:ring-0 aria-disabled:cursor-not-allowed aria-disabled:bg-v0-gray-100 aria-disabled:text-v0-gray-500 aria-disabled:ring-0 [&>svg]:pointer-events-none [&>svg]:size-4 [&_svg]:shrink-0 disabled:border-v0-alpha-400 text-v0-background-100 aria-disabled:border-v0-alpha-400 border-v0-gray-1000 bg-v0-gray-1000 hover:border-v0-gray-900 hover:bg-v0-gray-900 focus:border-v0-gray-900 focus:bg-v0-gray-900 focus-visible:border-v0-gray-900 focus-visible:bg-v0-gray-900 h-8 px-3 text-sm has-[>kbd]:gap-2 has-[>svg]:px-2 has-[>kbd]:pr-[6px] rounded-lg w-full","disabled":"$undefined","ref":null}]}]]}]]}],["$","div",null,{"className":"flex items-center gap-3 pr-1 w-full","children":[["$","$L7e",null,{"teamId":"team_nhOmpQMq9u54JSgEpTDS0gWY","authorId":"eO4aTgn8i8uTojzfFuq1T5h6"}],["$","$L95",null,{"className":"flex flex-1 min-w-0 items-center gap-3","href":"/templates/CZn91JpXIMe","tabIndex":-1,"prefetch":false,"data-testid":"template-card-link","children":["$","div",null,{"className":"flex flex-1 min-w-0 flex-col gap-1.5","children":[["$","div",null,{"className":"line-clamp-1 font-medium leading-none text-v0-gray-1000","children":"Resume"}],null,["$","div",null,{"className":"flex flex-row items-center gap-1.5 text-v0-gray-900","children":[["$","div",null,{"className":"flex flex-row whitespace-nowrap items-center gap-1.5","children":[["$","svg",null,{"className":"size-3","dangerouslySetInnerHTML":{"__html":"<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.5 3.25C2.5 1.45507 3.95507 0 5.75 0H6.25C8.04493 0 9.5 1.45507 9.5 3.25V3.75C9.5 5.54493 8.04493 7 6.25 7H5.75C3.95507 7 2.5 5.54493 2.5 3.75V3.25ZM5.75 1.5C4.7835 1.5 4 2.2835 4 3.25V3.75C4 4.7165 4.7835 5.5 5.75 5.5H6.25C7.2165 5.5 8 4.7165 8 3.75V3.25C8 2.2835 7.2165 1.5 6.25 1.5H5.75ZM1.5 14.5V13.1709C2.31958 11.5377 3.99308 10.5 5.82945 10.5H6.17055C8.00692 10.5 9.68042 11.5377 10.5 13.1709V14.5H1.5ZM5.82945 9C3.35483 9 1.10604 10.4388 0.0690305 12.6857L0 12.8353V13V15.25V16H0.75H11.25H12V15.25V13V12.8353L11.931 12.6857C10.894 10.4388 8.64517 9 6.17055 9H5.82945ZM15.931 12.6857C15.3706 11.4715 14.4561 10.4931 13.3439 9.85058L12.5935 11.1494C13.399 11.6148 14.0681 12.3101 14.5 13.1709V14.5H13.5V16H15.25H16V15.25V13V12.8352L15.931 12.6857ZM11.25 0H10.5V1.5H11.25C12.2165 1.5 13 2.2835 13 3.25V3.75C13 4.7165 12.2165 5.5 11.25 5.5H10.5V7H11.25C13.0449 7 14.5 5.54493 14.5 3.75V3.25C14.5 1.45507 13.0449 0 11.25 0Z\" fill=\"currentColor\"/>"},"data-testid":"geist-icon","height":16,"strokeLinejoin":"round","style":{"verticalAlign":"$undefined","width":"$undefined","height":"$undefined","color":"currentColor"},"viewBox":"0 0 16 16","width":16}],"$L9f"]}],"$La0","$La1"]}]]}]}]]}]]}]}]
</article></body></html>

How It Works

{step.title}

What Our Clients Say

Unleash the Power of AI

Our AI Products

{product.title}

Ready to Transform Your Creative Process?

Pricing Plans

Simple, Transparent Pricing

Frequently Asked Questions

{faq.question}

Need a custom solution?

Our Mission

Our Story

Our Values

{value.title}

Our Team

{member.name}

Our Journey

About

Tags

Share

About

Tags

Share

More from codescandy

More Templates Like This